<template>
  <div>
    <a-card :title="t('模板市场')">
      <a-form>
        <a-form-item :label="t('模板名称')">
          <a-input-search
            @search="search"
            allow-clear
            :placeholder="t('请输模板名称')"
            v-model:value="query.templateName"
            class="w-fit"
          ></a-input-search>
        </a-form-item>
        <a-form-item :label="t('选择尺寸')">
          <EslResolutions
            type="select"
            class="w-[200px]"
            @change="search"
            :options="resolutionList"
            v-model="query.resolutionId"
          />
        </a-form-item>
      </a-form>
      <a-pagination
        v-model:current="query.pageNum"
        :total="query.total"
        v-model:page-size="query.pageSize"
        @change="pageChange"
      ></a-pagination>
    </a-card>

    <a-card class="mt-4">
      <ul class="grid grid-cols-6 gap-4" v-if="table.data.length > 0">
        <li v-for="item in table.data" class="flex flex-col p-1 relative">
          <XImage
            style="object-fit: contain"
            :src="item.imgSrc"
            class="flex-1"
            :height="128"
          ></XImage>
          <div class="text-[1.2rem] font-bold template-name px-1">
            {{ item.templateName }}
          </div>
          <div class="text-gray-400">{{ item.resolutionWidth }}x{{ item.resolutionHeight }}</div>
          <div class="copy pos-absolute bottom-2 right-2">
            <a-button @click="copy(item.templateId!)" type="primary">{{ t('复制') }}</a-button>
          </div>
        </li>
      </ul>
      <a-empty v-else />
    </a-card>

    <a-modal :footer="false" centered v-model:open="visible" :title="t('复制并使用')">
      <a-card>
        <a-form @finish="submit" layout="vertical" :model="newTemplate">
          <a-form-item name="rename" :label="t('模板名称')" required>
            <a-input v-model:value="newTemplate.rename"></a-input>
          </a-form-item>
          <a-button type="primary" htmlType="submit">{{ t('确定') }}</a-button>
        </a-form>
      </a-card>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { listMarket } from '@/api/modules/lcd/template';
import { useQuery, useTable } from '@/hooks/table';
import type { IResolution } from '@/api/modules/data/resolution';
import { copyTemplate, type ITemplate } from '@/api/modules/esl/template';
import type { LabeledValue } from 'ant-design-vue/es/select';
import { notify } from '@/utils/common/common';
import { getLcdResolutionOptions } from '@/api/modules/utils/data';

interface Template {
  copyList: string[];
  rename: string;
}
const { t } = useI18n();
const query = useQuery<ITemplate>({
  resolutionId: '',
});
const visible = ref(false);

const newTemplate = ref<Template>({
  copyList: [],
  rename: '',
});
const table = useTable<ITemplate>();
const resolutionList = ref();

/*  */
const getMarketData = async () => {
  const { data } = await listMarket(query.value);
  query.value.total = data.total;
  table.value.data = data.rows;
};
const getResolution = async () => {
  resolutionList.value = await getLcdResolutionOptions();
};
const search = () => {
  query.value.pageNum = 1;
  getMarketData();
};
const pageChange = (page: number, pageSize: number) => {
  query.value.pageNum = page;
  query.value.pageSize = pageSize;
  getMarketData();
};
const copy = (id: string) => {
  visible.value = true;
  newTemplate.value.copyList = [id];
};
const submit = async () => {
  const { data } = await copyTemplate(newTemplate.value);
  notify(data);
  visible.value = false;
  newTemplate.value = {
    copyList: [],
    rename: '',
  };
};
onMounted(() => {
  getResolution();
  getMarketData();
});
</script>

<style lang="scss" scoped>
li {
  border: 1px solid #8181813b !important;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  .template-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .copy {
    opacity: 0;
    position: absolute;
  }
  &:hover {
    .copy {
      opacity: 1;
    }
  }
}
</style>
